<template>
  <div class="app-container">
    <!-- <el-tag>查询条件</el-tag> -->
    <div>
      <h4 style="margin:0 0 1.2rem 0">
        <el-tag type="info">查询条件</el-tag>
      </h4>
      <el-form ref="form" :model="form" label-width="6.3rem" style="display:flex;flex-wrap:wrap;">
        <el-form-item label="用户号">
          <el-input v-model="form.user_id" placeholder="请输入用户号" clearable></el-input>
        </el-form-item>
        <el-form-item label="渠道">
          <template slot-scope="scope">
            <el-select v-model="form.plat_id" clearable>
              <el-option v-for="item in platTypeList" :key="item.dict_id" :label="item.dict_value" :value="item.dict_id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="渠道用户号">
          <el-input v-model="form.plat_user_id" placeholder="请输入渠道用户号" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.user_name" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="form.cert_no" placeholder="请输入身份证号" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.mobile" placeholder="请输入手机号" clearable></el-input>
        </el-form-item>
        <el-form-item label="推荐码">
          <el-input v-model="form.referral_code" placeholder="请输入推荐码" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="bfc">
        <el-button class="btn" @click="reset" type="primary">重 置</el-button>
        <el-button class="btn" @click="search" type="primary">查 询</el-button>
      </div>
    </div>
    <div>
      <h4 style="margin:0 0 1.2rem 0">
        <el-tag type="info">基本列表</el-tag>
      </h4>
      <el-table :data="baseList" border style="width: 100%" tooltip-effect="dark">
        <el-table-column type="index" :index="indexMethod" label="序号" min-width="50" fixed="left">
        </el-table-column>
        <el-table-column prop="user_id" label="用户号" min-width="100" fixed="left" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="plat_id" :formatter="formatPlatId" label="渠道" min-width="100" fixed="left" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="plat_user_id" label="渠道用户号" min-width="100" fixed="left" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="user_type" :formatter="formatUserType" label="用户类型" min-width="100" fixed="left" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="user_name" label="用户名" min-width="100" fixed="left" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="cert_no" label="证件号" min-width="100" fixed="left" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="gender" :formatter="formatGender" label="性别" min-width="80">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="phone1" label="电话1" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="phone2" label="电话2" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="referral_code" label="推荐码" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="province" label="省份" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="city" label="地市" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="area" label="区县" min-width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="address" label="地址" min-width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="详情" min-width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" style="text-align: center" @click="lookView(scope.row)" plain><span class=" iconfont hhtx-chakan"></span></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination class="page-num" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="perPageNum" layout="total, sizes, prev, pager, next, jumper" :total="totalListNum">
        </el-pagination>
      </div>
    </div>
    <!-- 详情 -->
    <div class="dialog" v-if="isShow">
      <div class="dialog-box">
        <el-tabs style="margin-left:1.2rem" v-model="orderDetailTabs">
          <el-tab-pane name="userTab" label="用户详情" style="margin-right:1.2rem">
            <div class="content" style="overflow-y: auto;padding-left: 2.5rem;">
              <el-form ref="userForm" :model="userForm" :rules="userRules" label-width="5rem" style="display:flex;flex-wrap:wrap;">
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="用户号">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.user_id}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="平台渠道">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.plat_id_name}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="渠道用户号">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.plat_user_id}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" prop="user_name" style="width: 22rem;height: 1.9rem;" label="用户姓名">
                  <div class="bfc">
                    <el-input :disabled='isDisabled' v-model="userForm.user_name" @blur="maxLengthDispose($event,64)" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="证件号码">
                  <div class="bfc">
                    <el-input :disabled='isDisabled' @blur="isCardNo(itemDetail.cert_no)" v-model="itemDetail.cert_no" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="性别">
                  <div>
                    <el-select v-model="itemDetail.gender" slot="prepend" :disabled='isDisabled' placeholder="请选择" clearable>
                      <el-option label="男" value="m"></el-option>
                      <el-option label="女" value="f"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="手机号">
                  <div class="bfc">
                    <el-input :disabled='isDisabled' @blur="isMobAvailable(itemDetail.mobile)" v-model="itemDetail.mobile" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="电话1">
                  <div class="bfc">
                    <el-input :disabled='isDisabled' @blur="isPhoneAvailable(itemDetail.phone1)" v-model="itemDetail.phone1" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="电话2">
                  <div class="bfc">
                    <el-input :disabled='isDisabled' @blur="isPhoneAvailable(itemDetail.phone2)" v-model="itemDetail.phone2" placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" prop="province" style="width: 22rem;height: 1.9rem;" label="省市">
                  <div class="bfc">
                    <el-input v-model="userForm.province" :disabled='isDisabled' placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" prop="city" style="width: 22rem;height: 1.9rem;" label="地市">
                  <div class="bfc">
                    <el-input v-model="userForm.city" :disabled='isDisabled' placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" prop="area" style="width: 22rem;height: 1.9rem;" label="区县">
                  <div class="bfc">
                    <el-input v-model="userForm.area" :disabled='isDisabled' placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" prop="address" style="width: 22rem;height: 1.9rem;" label="地址">
                  <div class="bfc">
                    <el-input v-model="itemDetail.address" :disabled='isDisabled' placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" prop="referral_code" style="width: 22rem;height: 1.9rem;" label="推荐码">
                  <div class="bfc">
                    <el-input v-model="userForm.referral_code" :disabled='isDisabled' placeholder="请输入内容"></el-input>
                  </div>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" prop="remark" style="width: 22rem;height: 1.9rem;" label="备注">
                  <div>
                    <el-input style="font-size: 0.75rem; width: 15.6rem;" type="textarea" :rows="3" :disabled='isDisabled' placeholder="请输入内容" v-model="userForm.remark">
                    </el-input>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button class="btn" @click="close" type="primary" >关闭</el-button>
              <el-button class="btn" @click="saveInfo('userForm')" type="primary" :disabled='saveBtnDisabled'>保存</el-button>
              <el-button class="btn" @click="modified" type="primary" :disabled='modifyBtnDisabled'>更改</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane name="signTab" label="签约信息" style="margin-right:1.25rem;padding-left: 2.5rem;">
            <div class="content" style="overflow-y: auto">
              <el-form ref="form" :model="form" label-width="5rem" style="display:flex;flex-wrap:wrap;">
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="用户号">
                  <label style="font-weight: 300;" >{{itemDetail.user_id}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="平台渠道">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{itemDetail.plat_id_name}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="签约渠道">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{userSignDetail.channel_name}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="签约号">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{userSignDetail.agreement_no}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="签约账户">
                  <label style="font-weight: 300;font-size: 0.75rem" >{{userSignDetail.sign_account}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="生效日期">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{userSignDetail.valid_date}}</label>
                </el-form-item>
                <el-form-item class="form-item form-item-dialog" style="width: 22rem;height: 1.9rem;" label="失效日期">
                  <label style="font-weight: 300;font-size: 0.75rem;" >{{userSignDetail.invalid_date}}</label>
                </el-form-item>
              </el-form>
            </div>
            <div>
              <el-button class="btn" @click="close" type="primary">关闭</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
  import { getList, getUserDetail, updateUserDetail } from '@/api/users'
  import { queryDict } from '@/api/queryDict'
  export default {
    data() {
      return {
        platTypeList: [],
        isShow: false,
        isDisabled: true,
        saveBtnDisabled: true,
        modifyBtnDisabled:false,
        listLoading: '',
        textarea: '',
        currentPage: 1,
        baseList: [],
        orderDetailTabs: 'userTab',
        perPageNum: 10,
        totalListNum: 0,
        form: {
          user_id: '',
          plat_id: '',
          plat_user_id: '',
          user_name: '',
          cert_no: '',
          mobile: '',
          referral_code: ''
        },
        platIdOptions: [{
          value: '1',
          label: '支付宝'
        }, {
          value: '2',
          label: '微信'
        }],
        itemDetail: {},
        userSignDetail: {},
        userForm:{
          user_name:'',
          province:'',
          city:'',
          area:'',
          address:'',
          referral_code:'',
          remark:''
        },
        userRules: {
          user_name: [
            { max:64, message: '长度不多于64个字符', trigger: 'blur'}
          ],
          province: [
            { max: 16, message: '长度不多于16个字符', trigger: 'blur'}
          ],
          city: [
            { max: 16, message: '长度不多于16个字符', trigger: 'blur'}
          ],
          area: [
            { max: 16, message: '长度不多于16个字符', trigger: 'blur'}
          ],
          address: [
            { max: 128, message: '长度不多于128个字符', trigger: 'blur'}
          ],
          referral_code: [
            { max: 16, message: '长度不多于16个字符', trigger: 'blur'}
          ],
          remark: [
            { max: 128, message: '长度不多于128个字符', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.queryPlatType()
      const params = {
        'page': this.currentPage,
        'per_num': this.perPageNum
      }
      this.fetchData(params)
    },
    methods: {
      formatPlatId(row, column) {
        return row.plat_id === null ? '无' : row.plat_id === '12' ? '支付宝小程序' : row.plat_id === '13' ? '远联' : '未知'
      },
      formatUserType(row, column) {
        return row.user_type === null ? '无' : row.user_type === '1' ? '公司' : row.user_type === '2' ? '个人' : '未知'
      },
      formatGender(row, column) {
        return row.gender === null ? '无' : row.gender === 'm' ? '男' : row.gender === 'f' ? '女' : '未知'
      },
      formatChannel(row, column) {
        return row.channel === null ? '无' : row.channel === '1' ? '支付宝' : row.channel === '2' ? '微信' : row.channel === '3' ? '银联卡' : '未知'
      },
      queryPlatType() {
        const params = {
          'group_id': 'PLAT_TYPE',
          'status': '1'
        }
        queryDict(params).then(res => {
          this.platTypeList = res.data ? res.data : []
        }).catch(er => { })
      },
      reset() {
        this.form = {}
        this.currentPage = 1
        this.perPageNum = 10
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum
        }
        this.fetchData(params)
      },
      modified() {
        this.isDisabled = false
        this.saveBtnDisabled = false
        this.modifyBtnDisabled = true
      },
      search() {
        this.currentPage = 1
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'cert_no': this.form.cert_no,
          'mobile': this.form.mobile,
          'plat_id': this.form.plat_id,
          'plat_user_id': this.form.plat_user_id,
          'referral_code': this.form.referral_code,
          'user_id': this.form.user_id,
          'user_name': this.form.user_name
        }
        this.fetchData(params)
      },
      close() {
        if(this.isDisabled === false ){
          this.$confirm('您有未保存的用户信息, 是否继续关闭?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.isShow = !this.isShow
            this.itemDetail = {}
            this.userSignDetail = {}
            this.isDisabled = true
            this.modifyBtnDisabled = false
            this.saveBtnDisabled = true
          }).catch(() => {
          });
        } else{
          this.isShow = !this.isShow
          this.itemDetail = {}
          this.userSignDetail = {}
          this.isDisabled = true
          this.modifyBtnDisabled = false
          this.saveBtnDisabled = true
        }
      },
      saveInfo(formName) {
        var idCardNo = this.itemDetail.cert_no
        var mobile = this.itemDetail.mobile
        var phone1 = this.itemDetail.phone1
        var phone2 = this.itemDetail.phone2
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(idCardNo!=null&&idCardNo!=''&&reg.test(idCardNo) === false)
        {
          this.$message.error("请输入合法的证件号码！")
          return
        }
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (mobile!=null&&mobile!=''&&!myreg.test(mobile)) {
          this.$message.error('请输入合法的手机号！')
          return
        }
        var myreg1 = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
        if (phone1!=null&&phone1!=''&&!myreg1.test(phone1)) {
          this.$message.error('请输入合法的座机号！')
          return
        }
        if (phone2!=null&&phone2!=''&&!myreg1.test(phone2)) {
          this.$message.error('请输入合法的座机号！')
          return
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.alterUser()
          } else {
            return false;
          }
        });
      },
      alterUser() {
        const params = {
          'address': this.userForm.address,
          'area': this.userForm.area,
          'cert_no': this.itemDetail.cert_no,
          'city': this.userForm.city,
          'gender': this.itemDetail.gender,
          'mobile': this.itemDetail.mobile,
          'phone1': this.itemDetail.phone1,
          'phone2': this.itemDetail.phone2,
          'province': this.userForm.province,
          'referral_code': this.userForm.referral_code,
          'remark': this.userForm.remark,
          'user_id': this.itemDetail.user_id,
          'user_name': this.userForm.user_name
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        updateUserDetail(params).then(res => {
          const data = res.code
          if (data === '0000') {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.search()
            this.isDisabled = true
            this.modifyBtnDisabled = false
            this.saveBtnDisabled = true
          } else {
            this.$message.error('更新失败，请重试！')
          }
        }).catch(er => { })
        loading.close()
      },
      updateInfo() {
        this.isShow = !this.isShow
      },
      lookView(row) {
        this.isShow = !this.isShow
        const params = {
          'user_id': row['user_id']
        }
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        getUserDetail(params).then(res => {
          this.itemDetail = Object.assign({}, res.data)
          this.userForm.user_name = this.itemDetail.user_name
          this.userForm.province = this.itemDetail.province
          this.userForm.city = this.itemDetail.city
          this.userForm.area = this.itemDetail.area
          this.userForm.address = this.itemDetail.address
          this.userForm.referral_code = this.itemDetail.referral_code
          this.userForm.remark = this.itemDetail.remark
          this.itemDetail.plat_id_name = this.formatPlatId(this.itemDetail)
          this.userSignDetail = Object.assign({}, this.itemDetail.user_sign)
          this.userSignDetail.channel_name = this.formatChannel(this.userSignDetail)
          this.isDisabled = true
          this.orderDetailTabs = 'userTab'
        }).catch(errInfo => { })
        loading.close()
      },
      indexMethod(index) {
        return index + (this.currentPage - 1) * this.perPageNum + 1
      },
      handleSizeChange(val) {
        this.perPageNum = val
        this.currentPage = 1
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'cert_no': this.form.cert_no,
          'mobile': this.form.mobile,
          'plat_id': this.form.plat_id,
          'plat_user_id': this.form.plat_user_id,
          'referral_code': this.form.referral_code,
          'user_id': this.form.user_id,
          'user_name': this.form.user_name
        }
        this.fetchData(params)
      },
      handleCurrentChange(val) {
        this.currentPage = val
        const params = {
          'page': this.currentPage,
          'per_num': this.perPageNum,
          'cert_no': this.form.cert_no,
          'mobile': this.form.mobile,
          'plat_id': this.form.plat_id,
          'plat_user_id': this.form.plat_user_id,
          'referral_code': this.form.referral_code,
          'user_id': this.form.user_id,
          'user_name': this.form.user_name
        }
        this.fetchData(params)
      },
      fetchData(params) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.7)'
        })
        getList(params).then(res => {
          const data = res.data
          this.baseList = data ? data.result_list : null
          this.totalListNum = data ? data.total : 0
        }).catch(er => { })
        loading.close()
      },
      isCardNo(value){
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if(value!=null&&value!=''&&reg.test(value) === false)
        {
          this.$message.error("身份证输入不合法！")
        }
      },
      isMobAvailable(value) {
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
        if (value!=null&&value!=''&&!myreg.test(value)) {
          this.$message.error('手机号输入不合法！')
        }
      },
      isPhoneAvailable(value) {
        var myreg = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
        if (value!=null&&value!=''&&!myreg.test(value)) {
          this.$message.error('座机号输入不合法！')
        }
      },
      /**
       * 计算字符串长度 截取并返回指定长度的字符串
       * @param obj	元素对象
       * @param len	截取字节长度 中文2字节 英文1字节
       */
      maxLengthDispose(obj, len){
        // 获取元素值
        var content = obj.target.value
        if (content == null||content == '') {
          return;
        }
        // 计算元素值长度 中文2 英文1
        // 先将中文替换为英文在计算长度
        var realLen = content.toString().replace(/[^\x00-\xff]/g,"aa").length;
        // 当实际长度超出指定长度时
        if (realLen > len) {
          // 截取字符串
          this.$message.error('最长可输入'+len+'字节的字符！')
          obj.target.value=this.subString1(content, len)
          // 返回
        }
      },

      /**
       * 截取字符串 中英文混合
       * @param str	待处理字符串
       * @param len	截取字节长度 中文2字节 英文1字节
       */
      subString1(str, len){
        var regexp = /[^\x00-\xff]/g;// 正在表达式匹配中文
        // 当字符串字节长度小于指定的字节长度时
        if (str.replace(regexp, "aa").length <= len) {
          return str;
        }
        // 假设指定长度内都是中文
        var m = Math.floor(len/2);
        for (var i = m, j = str.length; i < j; i++) {
          // 当截取字符串字节长度满足指定的字节长度
          if (str.substring(0, i).replace(regexp, "aa").length >= len) {
            return str.substring(0, i);
          }
        }
        return str;
      }
    }
  }
</script>

<style  lang="scss" scoped>
  .form-item{
    font-size: 0.75rem;
  }
  .form-item-dialog{
    margin-top: 0.6rem;
  }
  .page-num {
    float: right;
  }
  .content {
    height: 24rem;
  }
  .pw22 {
    width: 22%;
  }
  .btn {
    float: right;
    margin: 0 0.9rem;
  }
  .ml20 {
    margin-left: 1.2rem;
  }
  .bfc {
    overflow: hidden;
  }
  .flex {
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }

  .w100 {
    display: block;
    width: 6.2rem;
    box-sizing: border-box;
    overflow: hidden;
  }
  .aic {
    align-items: center;
  }
  .jcsa {
    justify-content: flex-start;
  }

  .dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.25);
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    &-box {
      width: 60%;
      height: 31rem;
      background-color: #fff;
    }
  }


</style>
